Day 24 - Drag & Drop

參考

• React DnD | 實現可拖曳的任務牆
  • Task Board
  • 延伸: Azure Scrum Task Board
• Antd-Table-Drag
  • Drag sorting
  • Drag sorting with handler
  • key word: dnd-kit
• {A} Table CRUD
• {A} Editable Table Cells

應用 - 調整出賽順序

假設賽制對於單雙點數一樣

• EX#1: 風城盃:雙打x3
• EX#2: 園區盃:雙打x3 & 單打x2

風城盃-蔬菜團隊 (6人)

1. VGT (貝吉塔)
2. Cousin (表哥)
3. Goish (馬鈴薯)
4. Allen (阿良)
5. Engine
6. 毅力

結果

• v1 - Drag sorting
• v2 - Drag sorting with handler
  

key note

Code 收錄於分支: feature/dragDrop

1. npm i dnd-like

2. import

   import {
     DndContext,
     PointerSensor,
     useSensor,
     useSensors,
   } from "@dnd-kit/core";
   import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
   import {
     SortableContext,
     arrayMove,
     useSortable,
     verticalListSortingStrategy,
   } from "@dnd-kit/sortable";
   import { CSS } from "@dnd-kit/utilities";
   

3. Table columns add key: 'sort'

   const columns = [
     {
       key: 'sort',
     },
     {
       title: "NO#",
       dataIndex: "no",
     },  
     {
       title: "Name",
       dataIndex: "name",
     }
   ];
   

4. to be add Table component - Row

   import { MenuOutlined } from '@ant-design/icons';
   

   const Row = ({ children, ...props }) => {
     const {
       attributes,
       listeners,
       setNodeRef,
       setActivatorNodeRef,
       transform,
       transition,
       isDragging,
     } = useSortable({
       id: props['data-row-key'],
     });
     const style = {
       ...props.style,
       transform: CSS.Transform.toString(
         transform && {
           ...transform,
           scaleY: 1,
         },
       ),
       transition,
       ...(isDragging
         ? {
             position: 'relative',
             zIndex: 9999,
           }
         : {}),
     };
     return (
       <tr {...props} ref={setNodeRef} style={style} {...attributes}>
         {React.Children.map(children, (child) => {
           if (child.key === 'sort') {
             return React.cloneElement(child, {
               children: (
                 <MenuOutlined
                   ref={setActivatorNodeRef}
                   style={{
                     touchAction: 'none',
                     cursor: 'move',
                   }}
                   {...listeners}
                 />
               ),
             });
           }
           return child;
         })}
       </tr>
     );
   };
   

5. In App Section - sensors, onDragEnd

   

6. In App Section - DndContext, SortableContext, Table